import React, { Component } from 'react'
import PropTypes from 'prop-types'; // ES6

/*
    1. 安装： npm install --save prop-types
    2. 导入属性验证插件： import PropTypes from 'prop-types'; // ES6
    3. 通过组件名.propTypes 进行类型的验证
*/

const Header = (props) => {
    return (<>
        <div> 没有不变了承诺 -- {props.name} -- {props.num + 1} -- {props.age + 1} </div>
    </>)
}
// 属性验证
Header.propTypes = {
    name: PropTypes.string,
    // oneOfType 用来设置多种数据类型使用 
    num: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.bool,
        PropTypes.object,
        PropTypes.array,
        PropTypes.func
    ]).isRequired,
    age: PropTypes.number.isRequired // 设置必填
}

class Content extends Component {
    render() {

        return (
            <div>只有说不完的谎言。 -- {this.props.name} </div>
        )
    }
}

// 属性验证
Content.propTypes = {
    name: PropTypes.string
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Header name='React' num='18' age={18} />

                <Content name='React' num='18' obj={{
                    name: '张三',
                    age: 18
                }} />
            </div>
        )
    }
}
